<template>
  <div class="page">
    <div class="body">
      <m-header class="nm-titl" title="帮助中心" :canback="Boolean(1)"></m-header>
      <ul>
        <li class="list" v-for="item in list" :key="item.id" @click="goTo('QuestionList', item.id)">
          <span>{{item.name}}</span>
          <i class="iconfont iconright"></i>
        </li>
        <li class="list" @click="goTo('Problem')">
          <span>其他问题</span>
          <i class="iconfont iconright"></i>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import { Help } from "@/server/server.js";
  import titUrl from '../../assets/images/new/titl-help.png'
  export default {
    data() {
      return {
        list: "",
        titUrl
      };
    },
    mounted() {
      this.getCategoryList({}, data => {
        this.list = data;
      });
    },
    methods: {
      /**
       * 问题列表
       */
      getCategoryList(params, callback) {
        Help.getCategoryList(params).then(res => {
          if (res.code == 1) {
            callback(res.data);
          } else {
            mui.toast(res.msg);
          }
        });
      },
      goTo(routerName, id) {
        this.$router.push({ name: routerName, params:{ id:id}});
      }
    }
  };
</script>
<style lang="less" scoped>
  @import "~link-less";
  .body {
    // background: @bg-color;
    font-size: 28px;
    padding: 0 24px;
    .list {
      .display-flex();
      justify-content: space-between;
      height: 80px;
      line-height: 80px;
      padding: 0 30px;
      background: @bg-card-color;
      // border-bottom: 1px solid @bg-color;
      color: @bg-color-white;
    }

    .nm-titl {
      padding: 60px 0 70px;
    }
  }
</style>
